<!DOCTYPE html>
<html lang="en_US">
<head>
    <title>Star Wars Intro Creator</title>
    <meta charset="utf-8"/>
    <meta name="description" content="Create your own Star Wars opening crawl." />

    <meta property="og:locale" content="en_US">
    <meta property="og:url" content="http://brorlandi.github.io/StarWarsIntroCreator/">
    <meta property="og:title" content="Star Wars Intro Creator">
    <meta property="og:site_name" content="Star Wars Intro Creator">
    <meta property="og:description" content="Create your own Star Wars opening crawl.">
    <meta property="og:image" content="http://brorlandi.github.io/StarWarsIntroCreator/preview.png">
    <meta property="og:image:type" content="image/png">
    <meta property="og:type" content="website">
    <meta property="fb:app_id" content="966673750071792"/>


    <link rel="shortcut icon" href="favicon.png">
    <!-- build:css ./styles.css -->
    <link rel="stylesheet" type="text/css" href="bb8.css">
    <link rel="stylesheet" type="text/css" href="styles.css">
    <link rel="stylesheet" type="text/css" href="libs/sweetalert/dist/sweetalert.css">
    <!-- endbuild -->

    <!-- build:js ./vendor.js -->
    <script src="libs/jquery/dist/jquery.min.js"></script>
    <script src='libs/sweetalert/dist/sweetalert.min.js'></script>
    <script src='libs/handlebars/handlebars.min.js'></script>
    <!-- endbuild -->

    <meta name="theme-color" content="#000">
    <!-- Add to homescreen -->
    <meta name="mobile-web-app-capable" content="yes">
    <!-- More info: https://developer.chrome.com/multidevice/android/installtohomescreen -->
</head>
<body>
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.6&appId=966673750071792";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

<div class="bg">
    <div class="deathstar"></div>
</div>
<article class="starwars">
  <audio preload="auto">
    <source src="tfa.ogg" type="audio/ogg" />
    <source src="tfa.mp3" type="audio/mpeg" />
  </audio>
  <div id="loader" class="verticalWrapper" style="display:none">
    <div class="inner">
        <div class="bb8">
          <div class="bb8-top">
            <div class="bb8-antena"></div>
            <div class="bb8-antena-2"></div>
            <div class="bb8-head">
              <div class="orange-stripe"></div>
              <div class="hat"></div>
              <div class="eye"></div>
              <div class="eye-large">		</div>
            </div>
          </div>
          <div class="bb8-body">
            <div class="panel-1"></div>
            <div class="panel-2">
              <div class="inset-1"></div>
              <div class="inset-2"></div>
            </div>
            <div class="panel-3">
              <div class="inset-1"></div>
              <div class="inset-2"></div>
            </div>
            <div class="panel-4">
              <div class="inset-1"></div>
              <div class="inset-2"></div>
            </div>
            <div class="panel-5">
              <div class="inset-1"></div>
              <div class="inset-2"></div>
              <div class="plating"></div>
            </div>
          </div>
        </div>
    </div>
  </div>
  <section class="start">
    <div id="config">
    <form id="form-starwars">
      <h2 id="pageTitle">Star wars<br>intro CReator</h2>
      <button id="videoButton" class="downloadButton" type="button">download</button>
      <textarea id="f-intro" rows="2" spellcheck="false" maxlength="100">
A long time ago in a galaxy far,
far away....</textarea>
      <textarea id="f-logo" rows="2" spellcheck="false" maxlength="100">
Star
wars</textarea>
      <input id="f-episode" type="text" value="Episode VIII" spellcheck="false" maxlength="100">
      <input id="f-title" type="text" value="THE LAST JEDI" spellcheck="false" maxlength="100">
      <textarea id="f-text" spellcheck="false" maxlength="3000">
The FIRST ORDER reigns. Having decimated the peaceful Republic, Supreme Leader Snoke now deploys his merciless legions to seize military control of the galaxy.
Only General Leia Organa’s band of RESISTANCE fighters stand against the rising tyranny, certain that Jedi Master Luke Skywalker will return and restore a spark of hope to the fight.
But the Resistance has been exposed. As the First Order speeds toward the rebel base, the brave heroes mount a desperate escape....
      </textarea>

      <div>

        <input class="regular-checkbox" type="checkbox" id="f-center" /><label for="f-center"></label>
        <label for="f-center" id="flabel" class="noselect">Center text</label>
        </div><br>

      <button id="play" class="playButton" type="submit">
        Play
      </button>
      <br/>
      <span id="videoRequestAdvise">and request your video to download</span>
    </form>
    </div>

  </section>

  <div class="animation">

      <div class="introBg">

      </div>
    <div class="verticalWrapper">
        <section id="intro" class="intro noselect">
        </section>
    </div>

    <section class="titles noselect">
      <div style="width: 100%;">
        <p id="episode" class="tcenter">
        </p>
        <p  id="title" class="tcenter">
        </p>
        <div id="text">
        </div>
      </div>
    </section>

    <div class="verticalWrapper">
        <section class="logo noselect">
          <img id="logoimg" src="logo.svg" />
          <svg id="logosvg" viewBox="0 0 750 500">
              <text letter-spacing="15px" x="50%" y="50%" text-anchor="middle" fill="none" stroke-width="8px" stroke="#ffd54e"></text>
              <text letter-spacing="15px" x="50%" y="85%" text-anchor="middle" fill="none" stroke-width="8px" stroke="#ffd54e"></text>
          </svg>
      </section>
    </div>
  </div>
</article>
<div id="createdIntros" class="pageHide">

</div>
<div class="socialButtons pageHide">
    <form target="_blank" action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
        <input type="hidden" name="cmd" value="_s-xclick">
        <input type="hidden" name="hosted_button_id" value="EA3ESE322GAJA">
        <input type="hidden" name="custom" value="">
        <input type="hidden" name="charset" value="utf-8">
        <input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_donate_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
        <img alt="" border="0" src="https://www.paypalobjects.com/pt_BR/i/scr/pixel.gif" width="1" height="1">
    </form>

    <form target="_blank" action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
        <input type="hidden" name="cmd" value="_s-xclick">
        <input type="hidden" name="hosted_button_id" value="AU6WSD3YHLGHY">
        <input type="hidden" name="custom" value="">
        <input type="hidden" name="charset" value="utf-8">
        <input type="image" src="https://www.paypalobjects.com/pt_BR/i/btn/btn_donate_LG.gif" border="0" name="submit" alt="PayPal - A maneira fácil e segura de enviar pagamentos online!">
        <img alt="" border="0" src="https://www.paypalobjects.com/pt_BR/i/scr/pixel.gif" width="1" height="1">
    </form>

    <div id="btcether" class="footerText">
      <img src="bitcoin.svg" width="25px" height="25px"/>
      <span href="#">Bitcoin & Ether</span>
    </div>

    <div class="fb-like" data-href="https://www.facebook.com/StarWarsIntroCreator/" data-layout="button_count" data-action="like" data-show-faces="false" data-share="true"></div>
    <div>
        <a href="https://twitter.com/share" class="twitter-share-button"{count} data-text="Check out this Star Wars Intro Creator!" data-hashtags="StarWars">Tweet</a>
        <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
    </div>
    <div>
        <iframe src="https://ghbtns.com/github-btn.html?user=BrOrlandi&repo=StarWarsIntroCreator&type=star&count=true" frameborder="0" scrolling="0" width="170px" height="20px"></iframe>
    </div>
</div>
<div class="termsOfService pageHide">
    <a href="https://brorlandi.github.io/StrangerThingsIntroCreator/" target="_blank"><img src="./stic.jpg" alt="Stranger Things Intro Creator" width="120" style="position:fixed; right: 20px; bottom: 50px; margin-bottom: 20px"/></a>
    <a href="http://westworldintrocreator.kassellabs.io/" target="_blank"><img src="./wic.jpg" alt="Westworld Intro Creator" width="120" style="position:fixed; right: 20px; bottom: 50px; margin-bottom: 145px"/></a>
    <a id="termsOfServiceButton" href="https://goo.gl/forms/ecnYmOB146Ln78h02" target="_blank">Share your Story with us</a><br>
    <a id="termsOfServiceButton" href="termsOfService.html">Terms of Service</a>
</div>
<div id="footer" class="pageHide">
    Developed by <a href="https://github.com/BrOrlandi" target="2">Bruno Orlandi</a> and <a href="https://github.com/nihey" target="2">Nihey Takizawa</a> based on <a href="http://timpietrusky.com/star-wars-opening-crawl-from-1977" target="2">Tim Pietrusky</a> work.
</div>
<script>
// logo size calc
$(window).resize(function() {
    $('#logoimg').css('width',$(window).width()+'px');
    $('#logosvg').css('width',$(window).width()+'px');

    if($(window).height() < $("#config").height()+50){ // allow scroll if the form doesn't fit on the window
        $("body").css("overflow","auto");
    }else{
        $("body").css("overflow","hidden");
        $('body').scrollTop(0);
    }

    $(".sweet-alert").css("margin-top",-$(".sweet-alert").outerHeight()/2);
});
$(window).load(function () {
    $(window).trigger('resize');
})
$(document).scroll(function (e) {
    var max_height = $("#config").height()+50 - $(window).height();
    var height = $('body').scrollTop();
    if(height > max_height+200){ // prevent scrolling to much and reaching the deathstar befor the time.
        var val = max_height+200;
        $('body').scrollTop(val);
    }
})
</script>
<!-- build:js ./main.js -->
<script src="StarWars.js"></script>
<script src="createdIntros.js"></script>
<script src="errorFunction.js"></script>
<script src="main.js"></script>
<script src="redirectToNewWebsite.js"></script>
<script src="bitcoinEther.js"></script>
<!-- endbuild -->
<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-71659114-1', 'auto');
</script>
<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId      : '966673750071792',
      xfbml      : true,
      version    : 'v2.5'
    });
  };

  (function(d, s, id){
     var js, fjs = d.getElementsByTagName(s)[0];
     if (d.getElementById(id)) {return;}
     js = d.createElement(s); js.id = id;
     js.src = "//connect.facebook.net/en_US/sdk.js";
     fjs.parentNode.insertBefore(js, fjs);
   }(document, 'script', 'facebook-jssdk'));
</script>
<!-- Hotjar Tracking Code for http://brorlandi.github.io/ -->
<script>
    (function(h,o,t,j,a,r){
        h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};
        h._hjSettings={hjid:537847,hjsv:5};
        a=o.getElementsByTagName('head')[0];
        r=o.createElement('script');r.async=1;
        r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv;
        a.appendChild(r);
    })(window,document,'//static.hotjar.com/c/hotjar-','.js?sv=');
</script>
</body>
</html>
